<!--
 * @Descripttion: 选择规则凭证 或者 常用凭证
 * @version: V1.0
 * @Author: GW
 * @Date: 2022-05-06 16:55:53
 * @LastEditors: GW
 * @LastEditTime: 2022-06-14 16:51:14
-->
<template>
    <drag-modal :title="propsTitle" class="choice-modal" :mask="false" :visible="visibleModal" @cancel="cancel"
        width="1300px">
        <section class="content-temp-wrapper">
            <section class="content-menu-tree" :style="menuStyle">
                <div class="tree-btn clearfix" :style="munuTreeStyle">
                    <a-button type="danger" size="small" @click="deleteType" ghost
                        style="margin-right:10px;float:right">
                        <a-icon type="delete" />删除
                    </a-button>
                    <a-button type="primary" size="small" @click="editType" ghost style="margin-right:10px;float:right">
                        <a-icon type="edit" />修改
                    </a-button>
                    <a-button type="primary" size="small" @click="newType" ghost style="margin-right:10px;float:right">
                        <a-icon type="file-add" />新增
                    </a-button>
                </div>
                <!--收缩按钮-->
                <div class="shrink-btn" @click="clickShrink">
                    <a-icon v-if="menuStyleStatus" class="" type="double-left" />
                    <a-icon v-else class="" type="double-right" />
                </div>
                <div class="menu-tree-box" :style="munuTreeStyle">
                    <a-tree style="padding-top:10px;" :tree-data="treeMenu" show-icon default-expand-all
                        @select="onSelect" :selected-keys="selectedTreeKeys">

                    </a-tree>
                </div>
            </section>
            <div class="model-card">
                <div class="card-list" v-for="(item, index) in dataSource" :key="index">
                    <div class="card-center">
                        <div class="title">
                            <div class="title-item">{{ item.code }}-{{ item.name }}</div>
                            <div class="title-item" @click="templateEdit(item)">
                                <a-icon type="form" />
                            </div>
                            <div class="title-item" @click="templateDelete(item)">
                                <a-icon type="delete" />
                            </div>
                        </div>
                        <div style="padding:10px;height: 110px;overflow: auto;">
                            <div style="font-size:14px">借：</div>
                            <div style="margin-left:20px;" v-if="m.amountDirection == 1"
                                v-for="m in item.orderDetailList">
                                {{ m.accountingName }}</div>
                            <div style="font-size:14px;margin-left:18px">贷：</div>
                            <div style="margin-left:38px;" v-if="m.amountDirection == 2"
                                v-for="m in item.orderDetailList">
                                {{ m.accountingName }}</div>
                        </div>
                        <div class="card-btn" @click="generateCredentials(item.id)">
                            生成凭证
                        </div>
                    </div>
                </div>
                <div class="card-list">
                    <div class="card-center" style="cursor:pointer;text-align:center" @click="templateEdit(1)">
                        <a-icon class="card-add" type="plus" />
                    </div>
                </div>
            </div>
        </section>

        <!-- modal 弹窗  -->
        <add-credentials ref="add" :vtype="type" :typeId="selectedTreeRows.id" :nowId="nowId"
            @showEditFormula="showEditFormula" @getDataList="getDataList"></add-credentials>

        <edit-formula ref="formula" @formulaBack="formulaBack"></edit-formula>

        <template slot="footer">
            <a-button @click="cancel">取消</a-button>
        </template>

        <a-modal title="凭证分类名称" :visible="visibleType" :width="300" @ok="addTypeSave"
            @cancel="() => { visibleType = false }">
            <a-input v-model="typeName" placeholder="请填写凭证分类名称"></a-input>
        </a-modal>
    </drag-modal>
</template>
<script>
import { save, getList, detail, remove, addType, removeType, listType } from "@/api/finance/endCredentials";
import editFormula from "@/components/Finance/credentials/editFormula/editFormula";
import addCredentials from "@/components/Finance/credentials/add/add";
export default {
    props: {
        propsTitle: {
            type: String,
            default: ''
        }
    },
    components: {
        editFormula,
        addCredentials
    },
    data () {
        return {
            visibleModal: false,
            dataSource: [],//列表数据
            isRouterAlive: true,
            thisClickId: null,
            thisClickIndex: null,
            editColumn: [],
            propsData: {},
            propsIndex: null,

            accessRules: [],//取数规则 1:余额 2:末级科目借方余额 3:末级科目贷方余额 4:本级科目借方余额 5:本级科目贷方余额 6:末级科目借方发生额 7:末级科目贷方发生额 8:找平
            accountingCode: null,//会计科目编码
            accountingId: null,//会计科目id
            accountingName: null,//会计科目名称
            detailId: null,//明细id
            numberValue: null,//数值
            operation: null,//运算:1* 2/
            operationSymbol: null,//运算符号:1+ 2-
            propsAccountingName: '',

            type: 1,//1:常用凭证 2:规则凭证

            treeMenu: [],
            menuStyle: {},
            munuTreeStyle: {},
            selectedTreeKeys: [],
            selectedTreeRows: {},
            menuStyleStatus: true,

            visibleType: false,
            typeName: null

        }
    },
    created () {

    },
    methods: {
        show (type) {
            this.type = type;
            this.visibleModal = true;

            if (this.type == 1) {
                this.treeMenu = [
                    {
                        title: '常用凭证分类',
                        key: '0',
                        children: []
                    }
                ]
            } else {
                this.treeMenu = [
                    {
                        title: '规则凭证分类',
                        key: '0',
                        children: []
                    }
                ]
            }


            this.getDataList();
            this.getTypeList();
        },
        cancel () {
            this.visibleModal = false;
        },
        //获取凭证列表
        getDataList () {
            let requestData = {
                vType: this.type,
                type: this.selectedTreeRows.id,
            }
            getList(requestData).then(response => {
                if (response.code === 200) {
                    let data = response.data.records;
                    if (data.length < 1) {
                        this.dataSource = [];
                    } else {
                        for (let i = 0; i < data.length; i++) {
                            delete data[i].createDate;
                            data[i].key = data[i].id;
                        }

                        this.dataSource = data;
                    }
                }
            }).catch(error => { });
        },
        templateDelete (item) {
            //删除
            let that = this;
            this.$confirm(
                {
                    title: '提示',
                    content: <span>是否确认删除<span style="color:red">{item.name}</span>模板?</span>,
                    okText: '确定',
                    cancelText: '取消',
                    onOk () {
                        remove({ id: item.id }).then(res => {
                            if (res.code === 200) {
                                that.$message.success('删除成功');
                                that.getDataList();
                                that.nowId = null;
                            }
                        })
                    },
                    onCancel () {

                    },
                }
            )
        },
        templateEdit (data) {
            this.$refs.add.templateEdit(data, this.type);
        },
        showEditFormula (data) {
            this.$refs.formula.show(data.record, data.index);
        },
        generateCredentials (id) {
            localStorage.setItem("credentialsTemplate", JSON.stringify({ "id": id, "vtype": this.type }));
            this.$emit('notarize');
            setTimeout(() => {
                localStorage.removeItem("credentialsTemplate");//删除名称为“key”的信息。
            }, 1000)
        },
        clickShrink () {
            setTimeout(() => {
                this.menuStyleStatus = !this.menuStyleStatus;
                if (this.menuStyleStatus) {
                    this.menuStyle = { 'flex': '0 0 250px', 'width': '250px', 'border-right': '1px solid #ccc' }
                    this.munuTreeStyle = { 'display': 'block' }
                } else {
                    this.menuStyle = { 'flex': '0 0 32px', 'width': '32px', 'border': 'none' }
                    this.munuTreeStyle = { 'display': 'none' }
                }
            }, 200)
        },
        onSelect (keys, rows) {
            console.log('树形菜单选中', keys, rows, rows.node.dataRef);
            if (rows.selected && keys.indexOf('-') == -1) {
                this.selectedTreeKeys = keys;
                this.selectedTreeRows = rows.node.dataRef;
            } else {
                this.selectedTreeKeys = [];
                this.selectedTreeRows = {};

            }
            this.getDataList()
        },
        newType () {
            this.visibleType = true;
            this.typeName = null;
            this.selectedTreeKeys = [];
            this.selectedTreeRows = {};
        },
        editType () {
            if (this.selectedTreeKeys.length != 1) {
                this.$message.warning('请选择要修改的分类');
                return;
            }
            this.visibleType = true;
            this.typeName = this.selectedTreeRows.name;
        },
        addTypeSave () {
            //保存凭证分类
            let requestData = {
                name: this.typeName,//分类名称
                id: this.selectedTreeRows.id,
                type: this.type,//类型:1常用凭证2规则凭证
            }
            addType(requestData).then(res => {
                if (res.code === 200) {
                    if (this.selectedTreeRows.id) {
                        this.$message.success('修改分类成功');
                    } else {
                        this.$message.success('新增分类成功');
                    }
                    this.selectedTreeKeys = [];
                    this.selectedTreeRows = {};
                    this.typeName = null;
                    this.visibleType = false;
                    this.getTypeList();
                }
            })
        },
        getTypeList () {
            listType({ type: this.type }).then(res => {
                if (res.code === 200) {
                    if (res.data.length > 0) {
                        res.data.forEach(item => {
                            item.title = item.name;
                            item.key = item.id;
                        });
                    }
                    this.treeMenu[0].children = res.data;
                }
            })
        },
        deleteType () {
            if (this.selectedTreeKeys.length != 1) {
                this.$message.warning('请选择要删除的分类');
                return;
            }
            let _this = this;
            this.$confirm({
                title: "提示",
                content: (
                    <span>
                        是否确认删除 “{_this.selectedTreeRows.name}” 分类?
                    </span>
                ),
                onOk () {
                    removeType({ id: _this.selectedTreeKeys[0] }).then(res => {
                        if (res.code === 200) {
                            _this.$message.success('删除分类成功');
                            _this.selectedTreeKeys = [];
                            _this.selectedTreeRows = {};
                            _this.typeName = null;
                            _this.getTypeList();
                        }
                    })
                },
                onCancel () { },
            });
        }

    }
}
</script>
<style lang="less" scoped>
@import '~@/style/setting/business.less';

.content-temp-wrapper {
    height: 100vh;
    display: flex;

    .content-menu-tree {
        position: relative;
        transition: all 0.2s;
        flex: 0 0 250px;
        padding: 10px 0px;
        height: 100vh;
        border-right: 1px solid #ccc;

        .tree-btn {
            width: 100%;
            height: 32px;
            border-bottom: 1px solid #ccc;
        }

        .shrink-btn {
            position: absolute;
            right: 0;
            top: 50%;
            width: 32px;
            height: 40px;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
            z-index: 888;
        }

        .menu-tree-box {
            height: calc(100% - 22px);
            overflow-y: auto;
        }

        .menu-btn-box {
            height: 33px;
            position: absolute;
            width: 100%;
            border-bottom: 1px solid #ccc;
            right: 0px;
            top: 0px;
            text-align: right;
        }
    }
}

.model-card {
    margin: 0px;
    flex: 1;
    height: calc(100% - 10px);
    min-width: 1000px;
    border-bottom: none;
    overflow-y: auto;
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    .card-list {
        flex: 0 0 25%;
        height: 230px;
        font-size: 12px;
        padding: 10px;
        box-sizing: border-box;

        .card-center {
            position: relative;
            border: 1px solid rgba(30, 159, 255, 0.8);
            width: 100%;
            height: 100%;
            font-size: 14px;

            .title {
                display: flex;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background: rgba(30, 159, 255, 0.8);
                color: #ffffff;

                .title-item:nth-child(1) {
                    flex: 0 0 70%;
                    text-align: left;
                    padding-left: 10px;
                    box-sizing: border-box;
                }

                .title-item:nth-child(2) {
                    flex: 0 0 15%;
                    cursor: pointer;
                }

                .title-item:nth-child(3) {
                    flex: 0 0 15%;
                    cursor: pointer;
                }
            }

            .card-add {
                margin-top: 68px;
                font-size: 72px;
                color: rgba(30, 159, 255, 0.8);
            }

            .card-btn {
                position: absolute;
                bottom: 10px;
                width: 100px;
                background: rgba(30, 159, 255, 0.8);
                left: 50%;
                margin-left: -50px;
                text-align: center;
                color: #ffffff;
                cursor: pointer;
                padding: 5px 0;
            }
        }
    }

    .card-list:hover {
        .card-center {
            border: 1px solid rgba(30, 159, 255, 1);
        }

        .title {
            background: rgba(30, 159, 255, 1);
        }

        .card-btn {
            background: rgba(30, 159, 255, 1);
        }

        .card-add {
            color: rgba(30, 159, 255, 1);
        }
    }
}
</style>
<style lang="less">
.choice-modal {
    .ant-modal-body {
        padding: 0 !important;
    }
}
</style>